<template>
  <div class="dp-index">
    <nav-header></nav-header>
    <div class="charts-list">
      <div class="sh-box">
        <div class="charts-item" style="height: 25%">
          <div class="title-box">
            <p>设备状态</p>
            <span>Equipment status</span>
          </div>
          <div class="text-box">
            <div class="text-item1">
              <p>8</p>
              <span>设备总数</span>
            </div>
            <div class="text-item2">
              <p>0</p>
              <span>离线</span>
            </div>
            <div class="text-item3">
              <p>8</p>
              <span>在线</span>
            </div>
          </div>
        </div>
        <div class="charts-item" style="height: 34%">
          <div class="title-box">
            <p>沉降数据分析</p>
            <span>Settlement data analysis</span>
          </div>
          <div class="chart-box">
            <line-bar
              :className="'chart2'"
              :title="'沉降'"
              :chart-data="lineChartData2"
            ></line-bar>
          </div>
        </div>
        <div class="charts-item" style="height: 34%">
          <div class="title-box">
            <p>倾角数据分析</p>
            <span>Analysis of inclination data</span>
          </div>
          <div class="chart-box">
            <line-chartJ
              :className="'chart3'"
              :title="'倾角'"
              :chart-data="lineChartData3"
            ></line-chartJ>
          </div>
        </div>
      </div>
      <div class="sh-box">
        <div class="charts-item" style="height: 33%">
          <div class="title-box">
            <p>压强对比</p>
            <span>Pressure comparison</span>
          </div>
          <div class="chart-box">
            <bar-more :className="'chart8'" :chart-data="barChartData1"></bar-more>
          </div>
        </div>
        <div class="charts-item" style="height: 26%">
          <div class="title-box">
            <p>健康状态分析</p>
            <span>Health status analysis</span>
          </div>
          <div class="chart-box chart-box1">
            <div class="chart-radar">
              <radar-chart :className="'chart7'"></radar-chart>
            </div>
            <div class="jk-text">
              <p>铁塔健康指数</p>
              <span>88</span>
            </div>
          </div>
        </div>
        <div class="charts-item" style="height: 33%">
          <div class="title-box">
            <p>接地电阻</p>
            <span>Grounding resistance</span>
          </div>
          <div class="chart-box">
            <bar-chart
              :className="'chart4'"
              :title="'接地电阻'"
              :chart-data="barChartData"
            ></bar-chart>
          </div>
        </div>
      </div>
      <div class="sh-box">
        <div class="charts-item" style="height: 34%">
          <div class="title-box">
            <p>风速分析</p>
            <span>Wind speed analysis</span>
          </div>
          <div class="chart-box">
            <line-chart
              :className="'chart1'"
              :title="'风速'"
              :chart-data="lineChartData"
            ></line-chart>
          </div>
        </div>
        <div class="charts-item" style="height: 24%">
          <div class="title-box">
            <p>拉线数据分析</p>
            <span>cable data analysis</span>
          </div>
          <div class="chart-box">
            <div class="per-box">
              <span>A1拉线点</span>
              <el-progress color="#68E2F7" :percentage="50"></el-progress>
            </div>
            <div class="per-box">
              <span>B1拉线点</span>
              <el-progress color="#68E2F7" :percentage="80"></el-progress>
            </div>
          </div>
        </div>
        <div class="charts-item" style="height: 34%">
          <div class="title-box">
            <p>温湿度趋势</p>
            <span>Temperature and humidity trend</span>
          </div>
          <div class="chart-box">
            <line-two
              :className="'chart6'"
              :title="'大气'"
              :chart-data="lineChartData1"
            ></line-two>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { listAir } from "@/api/system/air";
import { listWind } from "@/api/system/wind";
import { listDip } from "@/api/system/dip";
import { listResistance } from "@/api/system/resistance";
import { listSubside } from "@/api/system/subside";
import { listGps } from "@/api/system/gps";
import navHeader from "./components/navHeader.vue";
import lineChart from "./components/lineChart.vue";
import lineChartJ from "./components/lineChartJ.vue";
import scatterChart from "./components/scatterChart.vue";
import barChart from "./components/barChart.vue";
import lineTwo from "./components/lineTwo.vue";
import lineBar from "./components/lineBar.vue";
import radarChart from "./components/radarChart.vue";
import barMore from "./components/barMore.vue";
export default {
  name: "analysis",
  components: {
    navHeader,
    lineChart,
    scatterChart,
    barChart,
    lineTwo,
    lineBar,
    radarChart,
    lineChartJ,
    barMore
  },
  data() {
    return {
      lineChartData: {},
      lineChartData1: {},
      lineChartData2: {},
      lineChartData3: {},
      barChartData: [],
      scatterData: [],
      barChartData1:{}
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      const queryParams = {
        pageNum: 1,
        pageSize: 7,
      };
      // 风速
      listWind(queryParams).then((response) => {
        let oneList = [];
        let twoList = [];
        if (response.rows.length > 0) {
          response.rows.forEach((item) => {
            oneList.push(item.windSeep);
            twoList.push(item.windPower);
          });
          this.lineChartData = {
            expectedData: oneList,
            actualData: twoList,
          };
        }
      });
      //大气
      listAir(queryParams).then((response) => {
        let oneList = [];
        let twoList = [];
        let threeList = [];
        if (response.rows.length > 0) {
          response.rows.forEach((item) => {
            oneList.push(item.airTemp);
            twoList.push(item.airHum);
            threeList.push(item.airPressure);
          });
          this.lineChartData1 = {
            expectedData: oneList,
            actualData: twoList,
          };
          this.barChartData1 = {
            expectedData: [320, 332, 301, 334, 390, 330, 320],
            actualData: threeList,
          }
        }
      });
      //倾角
      listDip(queryParams).then((response) => {
        let oneList = [];
        let twoList = [];
        if (response.rows.length > 0) {
          response.rows.forEach((item) => {
            oneList.push(item.pitch);
            twoList.push(item.azimuth);
          });
          this.lineChartData3 = {
            expectedData: oneList,
            actualData: twoList,
          };
        }
      });
      //电阻
      listResistance(queryParams).then((response) => {
        let dataList = [];
        response.rows.forEach((item) => {
          dataList.push(item.resistanceValue);
        });
        this.barChartData = dataList;
      });
      //GPS
      listGps(this.queryParams).then((response) => {
        let dataList = [];
        response.rows.forEach((item) => {
          dataList.push([item.lon, item.lat]);
        });
        this.scatterData = dataList;
      });
      //沉降
      listSubside(queryParams).then((response) => {
        let oneList = [];
        let twoList = [];
        if (response.rows.length > 0) {
          response.rows.forEach((item) => {
            oneList.push(item.subsideOne);
            twoList.push(item.subsideTwo);
          });
          this.lineChartData2 = {
            expectedData: oneList,
            actualData: twoList,
          };
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.dp-index {
  width: 100%;
  height: 100%;
  background: url("../../assets/images/sj-bg.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
}
.charts-list {
  width: 100%;
  height: calc(100% - 80px);
  padding: 20px 30px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex: 1;
  .sh-box{
    width: 32%;
    height: 100%;
  }
  .charts-item {
    width: 100%;
    margin-bottom: 30px;
    display: flex;
    flex-flow: column;
    .chart-box {
      width: 100%;
      flex: 1;
    }
    .chart-box1{
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 10px;
    }
    .chart-radar{
      width: 75%;
      height: 100%;
    }
    .jk-text{
      width: 25%;
      p{
        font-size: 20px;
        color: #fff;
        font-family: 'youshe';
        margin: 10px 0;
      }
      span{
        font-size: 26px;
        color: #00FFBD;
        font-family: 'dinb';
      }
    }
  }
}
.per-box {
  display: flex;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  &:first-of-type {
    margin-top: 30px;
  }
  span {
    font-size: 14px;
    color: #fff;
  }
  .el-progress {
    flex: 1;
    margin: 0 10px;
  }
  ::v-deep .el-progress__text {
    color: #fff !important;
  }
}
.title-box {
  width: 100%;
  background: url("../../assets/images/title-bg.png") 0 0 no-repeat;
  display: flex;
  align-items: center;
  padding-left: 50px;
  p {
    padding: 0;
    font-size: 22px;
    color: #fff;
    font-family: "youshe";
    margin: 0 20px 0 0;
  }
  span {
    font-size: 12px;
    text-transform: uppercase;
    color: #8ec7ff;
  }
}
.text-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  position: relative;
  .text-item1 {
    position: absolute;
    left: 80px;
    top: 30px;
    width: 133px;
    height: 133px;
    background: url("../../assets/images/t1.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    span {
      color: #74cbff;
    }
  }
  .text-item2 {
    position: absolute;
    left: 220px;
    bottom: 10px;
    width: 106px;
    height: 106px;
    background: url("../../assets/images/t2.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    span {
      color: #ffbc74;
    }
  }
  .text-item3 {
    position: absolute;
    right: 140px;
    top: 50px;
    width: 116px;
    height: 116px;
    background: url("../../assets/images/t3.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    span {
      color: #74ff9e;
    }
  }
  p {
    font-family: "dinb";
    font-size: 32px;
    margin: 0;
    color: #fff;
  }
  span {
    font-size: 18px;
  }
}
</style>
